<template>
    <div class="Addmeterreading">
        <Addtitle>添加抄表账单</Addtitle>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="inputbox">
                <el-form-item label="选择小区：" prop="community" class="selectinput">
                    <el-select v-model="ruleForm.community" placeholder="选择小区：">
                    <el-option label="万象城" value="万象城"></el-option>
                    <el-option label="碧桂园" value="碧桂园"></el-option>
                    <el-option label="大卫城" value="大卫城"></el-option>
                    <el-option label="万达文旅城" value="万达文旅城"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择楼宇：" prop="building" class="selectinput">
                    <el-select v-model="ruleForm.building" placeholder="选择楼宇：">
                    <el-option label="1号楼" value="1号楼"></el-option>
                    <el-option label="2号楼" value="2号楼"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择单元：" prop="unit" class="selectinput">
                    <el-select v-model="ruleForm.unit" placeholder="选择单元：">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择房间：" prop="room" class="selectinput">
                    <el-select v-model="ruleForm.room" placeholder="选择房间：">
                    <el-option label="101" value="101"></el-option>
                    <el-option label="102" value="102"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择收费项目：" prop="charingitem" class="selectinput">
                    <el-select v-model="ruleForm.charingitem" placeholder="选择收费项目：">
                    <el-option label="水费" value="水费"></el-option>
                    <el-option label="电费" value="电费"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="计量单位：" prop="measurement" class="inputtaxt">
                    <el-input v-model="ruleForm.measurement" placeholder="输入计量单位，如：月/平方"></el-input>
                </el-form-item>
                <el-form-item label="单价：" prop="unitprice" class="inputtaxt">
                    <el-input v-model="ruleForm.unitprice" placeholder="输入计量单位，如：月/平方"></el-input>
                </el-form-item>
                <el-form-item label="缴费周期：" prop="Paymentcycle" class="inputtaxt">
                    <el-input v-model="ruleForm.Paymentcycle"></el-input>
                </el-form-item>
                <el-form-item label="上期读数：" prop="Previousreading" class="inputtaxt">
                    <el-input v-model="ruleForm.Previousreading"></el-input>
                </el-form-item>
                <el-form-item label="本期读数：" prop="Currentreading" class="inputtaxt">
                    <el-input v-model="ruleForm.Currentreading"></el-input>
                </el-form-item>
                <div class="spli">
                    <el-form-item label="用量：" prop="usage" class="inputtaxt">
                        <el-input v-model="ruleForm.usage"></el-input>
                    </el-form-item>
                    <p>如输入上期和本期读数，可为空，否则需输入实际用量</p>
                </div>
                 <el-form-item label="备注：" prop="note" class="textareainput">
                    <el-input type="textarea" v-model="ruleForm.note" maxlength="300" show-word-limit placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </div>
            <div class="buttonbox">
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" class="creat">提交</el-button>
                    <el-button @click="resetForm('ruleForm')" class="reseate">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
import Addtitle from '../components/Addtitle.vue'
export default {
    components:{
        Addtitle
    },
     data() {
      return {
        ruleForm: {
            community:'',   //小区
            building:'',    //楼宇
            unit:'',        //单元
            room:'',        //房间
            charingitem:'', //收费项目
            measurement:'', //计量单位
            unitprice:'',   //单价
            Paymentcycle:'', //缴费周期
            Previousreading:'',//上期读数
            Currentreading:'',  //本期读数
            usage:'',           //用量
            note:'',            //备注
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
        },
        rules: {
            community:[
                { required: true, message: '请选择小区', trigger: 'change' }
            ],
            building:[
                { required: true, message: '请选择楼宇', trigger: 'change' }
            ],
            unit:[
                { required: true, message: '请选择单元', trigger: 'change' }
            ],
            room:[
                { required: true, message: '请选择房间', trigger: 'change' }
            ],
            charingitem:[
                { required: true, message: '请选择收费项目', trigger: 'change' }
            ],
            measurement:[
                { required: true, message: '请输入计量单位', trigger: 'blur' },
            ],
            unitprice:[
                { required: true, message: '请输入单价', trigger: 'blur' },
            ],
            Paymentcycle:[
                { required: true, message: '请输入缴费周期', trigger: 'blur' },
            ],
            Previousreading:[
                { required: true, message: '请输入上期读数', trigger: 'blur' },
            ],
            Currentreading:[
                { required: true, message: '请输入本期读数', trigger: 'blur' },
            ],
            usage:[
                { required: true, message: '请输入用量', trigger: 'blur' },
            ],
            note:[
                { required: false, message: '请输入备注', trigger: 'blur' },
            ],
            name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            region: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
            ],
            date1: [
                { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            date2: [
                { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
            ],
            type: [
                { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
            ],
            resource: [
                { required: true, message: '请选择活动资源', trigger: 'change' }
            ],
            desc: [
                { required: true, message: '请填写活动形式', trigger: 'blur' }
            ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            console.log(this.ruleForm)
            this.$axios.post('http://127.0.0.1/meterlistsinsert',{
                ...this.ruleForm
            },{
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                },
            }).then(res=>{
                console.log(res.data)
                this.$router.go(-1)
                this.$message({
                    type: 'success',
                    message: '数据添加成功!'
                });
            }).catch(err=>{
                console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style lang="scss" scoped>
    .Addmeterreading{
        width: 1260px;
        margin: auto;
        background-color: #fff;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .buttonbox{
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            border-top: 1px solid rgba(242, 242, 242, 1);
            justify-content: center;
            ::v-deep .el-form-item__content{
                margin-left: 0 !important;
            }
            .creat{
                width: 80px;
                height: 30px;
                padding: 0 !important;
                background: #0079fe;
            }
            .creat:hover{
                background: #66b1ff !important;
                color: #fff !important;
            }
            .reseate{
                width: 80px;
                height: 30px;
                padding: 0 !important;
                background: #fff;
                border-color: #0079fe !important;
                color: #0079fe;
            }
            .reseate:hover{
                background: #fff !important;
                border-color: #66b1ff !important;
                color: #66b1ff !important;
            }
            .el-button+.el-button{
                margin-left: 20px;
            }
        }
        .inputbox{
            padding-left: 100px;
            padding-top: 40px;
            box-sizing: border-box;
            .spli{
                display: flex;
                align-items: center;
                p{
                    font-size: 14px;
                    margin-bottom: 22px;
                    color: #999;
                    margin-left: 10px;
                }
            }
            .textareainput{
                width: 770px;
                ::v-deep .el-form-item__label{
                    width: 120px !important;
                    padding-right: 10px;
                    height: 35px;
                    line-height: 35px;
                    // box-sizing: border-box;
                }
                ::v-deep .el-textarea__inner{
                    width: 650px;
                    height: 118px;
                    resize: none;
                }
                ::v-deep .el-form-item__content{
                    margin-left: 120px !important;
                }
            }
             .selectinput{
                width: 520px;
                ::v-deep .el-form-item__label{
                    width: 120px !important;
                    padding-right: 10px;
                    height: 35px;
                    // box-sizing: border-box;
                }
                ::v-deep .el-form-item__content{
                    margin-left: 120px !important;
                }
                ::v-deep .el-input__inner{
                    width: 400px;
                    height: 35px !important;
                }
            }
            .inputtaxt{
                width: 520px;
                ::v-deep .el-form-item__label{
                    width: 120px !important;
                    padding-right: 10px;
                    // box-sizing: border-box;
                }
                ::v-deep .el-form-item__content{
                    margin-left: 120px !important;
                }
                ::v-deep .el-input__inner{
                    width: 400px;
                }
            }
        }
    }
</style>